<template>
  <el-container v-loading="loading">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" label-position="left" size="small">
      <el-form-item label="小程序名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="首页转发图片" prop="forward">
        <el-upload
          name="forward"
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="fileUpload"
          :on-success="handleAvatarSuccess">
          <img v-if="ruleForm.forward" :src="ruleForm.forward" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="海报图片" prop="poster">
        <el-upload
          name="poster"
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="fileUpload"
          :on-success="handleAvatarSuccess">
          <img v-if="ruleForm.poster" :src="ruleForm.poster" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="首页授权图片" prop="authorize">
        <el-upload
          name="authorize"
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="fileUpload"
          :on-success="handleAvatarSuccess">
          <img v-if="ruleForm.authorize" :src="ruleForm.authorize" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="积分抵现" prop="integral">
        <el-input v-model="ruleForm.integral" placeholder="100积分等于1元">
          <template slot="append">积分</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：100积分等于1元</span>
        </div>
      </el-form-item>

      <el-form-item label="积分使用规则" prop="integral_rule">
        <el-input type="textarea" v-model="ruleForm.integral_rule"
                  placeholder="积分使用规则用于用户结算页说明显示，为了更好体验字数最好不要超过80字"></el-input>
        <div class="form-item-tip">
          <span>提示：积分使用规则用于用户结算页说明显示，为了更好体验字数最好不要超过80字</span>
        </div>
      </el-form-item>

      <el-form-item label="保单金额设置" prop="secure_price">
        <el-input placeholder="请输入" v-model="ruleForm.secure_price">
          <template slot="append">元</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：设置每笔订单的固定保单金额</span>
        </div>
      </el-form-item>

      <el-form-item label="提成设置" prop="extract">
        <el-input placeholder="提成设置只能设置0.01~1之间" v-model="ruleForm.extract"></el-input>
        <div class="form-item-tip">
          <span>提示：提成设置只能设置0.01~1之间</span>
        </div>
      </el-form-item>

      <el-form-item label="用户获得积分比例" prop="user_integral">
        <el-input placeholder="用户获得积分比例设置只能设置0.01~1之间" v-model="ruleForm.user_integral"></el-input>
        <div class="form-item-tip">
          <span>提示：用户获得积分比例设置只能设置0.01~1之间</span>
        </div>
      </el-form-item>

      <el-form-item label="会员获取积分比例" prop="vip_integral">
        <el-input placeholder="会员获取积分比例设置只能设置0.01~1之间" v-model="ruleForm.vip_integral"></el-input>
        <div class="form-item-tip">
          <span>提示：会员获取积分比例设置只能设置0.01~1之间</span>
        </div>
      </el-form-item>

      <el-form-item label="会员价格" prop="vip_price">
        <el-input placeholder="请输入会员价格" v-model="ruleForm.vip_price">
          <template slot="append">元</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：会员价格(单位/月)</span>
        </div>
      </el-form-item>

      <el-form-item label="积分使用最低金额" prop="integral_max_price">
        <el-input placeholder="订单金额大于多少可以使用积分" v-model="ruleForm.integral_max_price">
          <template slot="append">元</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：订单金额大于多少可以使用积分</span>
        </div>
      </el-form-item>

      <el-form-item label="积分最大抵现" prop="integral_reduce_price">
        <el-input placeholder="积分最多抵扣多少元" v-model="ruleForm.integral_reduce_price">
          <template slot="append">元</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：积分最多抵扣多少元</span>
        </div>
      </el-form-item>

      <el-form-item label="会员权益说明">
        <quill-editor
          v-model="ruleForm.vip_rights">
        </quill-editor>
        <div class="form-item-tip">
          <span>提示：成为会员用户可享受的相关权益说明文字</span>
        </div>
      </el-form-item>

      <el-form-item label="底部版权" prop="copyright">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="ruleForm.copyright"></el-switch>
      </el-form-item>

      <el-form-item label="底部版权文字" prop="copyright_rule">
        <el-input placeholder="请输入" v-model="ruleForm.copyright_rule"></el-input>
      </el-form-item>

      <el-form-item label="客服电话" prop="phone">
        <el-input placeholder="请输入" v-model="ruleForm.phone"></el-input>
      </el-form-item>

      <el-form-item label="零钱提现">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="ruleForm.open_pay">
        </el-switch>
      </el-form-item>

      <el-form-item label="零钱自动到账">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="ruleForm.auto_pay">
        </el-switch>
      </el-form-item>

      <el-form-item label="区域限制">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="ruleForm.area_limit">
        </el-switch>
      </el-form-item>

      <el-form-item label="收货码">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="ruleForm.is_confirm_code">
        </el-switch>
      </el-form-item>

      <el-form-item label="保证金申请退款时间">
        <el-input placeholder="请输入" v-model="ruleForm.refund_promise_time">
          <template slot="append">天</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：成为会员用户可享受的相关权益说明文字</span>
        </div>
      </el-form-item>

      <el-form-item label="最大提现金额">
        <el-input placeholder="请输入" v-model="ruleForm.max_withdraw">
          <template slot="append">元（整数）</template>
        </el-input>
        <div class="form-item-tip">
          <span>提示：最大提现金额，默认 /元（整数）</span>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
      </el-form-item>
    </el-form>

  </el-container>
</template>

<script>
  export default {
    mounted: function () {
      let _this = this;
      this.api.getProcedureConfig().then(function (res) {
        if (res.code == 1) {
          _this.ruleForm = res.data;
        }
        _this.loading = false;
      }).catch(function (error) {
        throw new Error(error);
      })
    },
    data() {
      return {
        loading: true,  // 页面加载
        imageUrl: '',
        ruleForm: {
          name: '',                //类型：String  必有字段  备注：小程序名称
          forward: '',                //类型：String  必有字段  备注：转发图片
          authorize: '',                //类型：String  必有字段  备注：首页授权图片
          poster: '',                //类型：String  必有字段  备注：海报图片
          integral: 0,                //类型：Number  必有字段  备注：积分抵现0是关闭1是开启
          integral_rule: '',                //类型：String  必有字段  备注：积分抵现声明
          copyright: 0,                //类型：Number  必有字段  备注：版权说明0是关闭1是开启
          copyright_rule: '',                //类型：String  必有字段  备注：版权说明内容
          negotiate: 0,                //类型：Number  必有字段  备注：开启议价:0关闭1开启
          secure_price: '',                //类型：String  必有字段  备注：保单金额
          phone: '',                //类型：String  必有字段  备注：联系手机
          extract: '',                //类型：String  必有字段  备注：提成设置 只能设置0.01~1之间
          open_pay: '',                //类型：String  必有字段  备注：0关闭1开启(零钱提现)
          auto_pay: '',                //类型：String  必有字段  备注：0关闭1开启(零钱提现审核)
          user_integral: '',                //类型：String  必有字段  备注：用户获得积分比例，0.01~1之间
          vip_integral: '',                //类型：String  必有字段  备注：会员获取积分比例，0.01~1之间
          vip_price: "0",                //类型：String  必有字段  备注：会员价格,单位：元/月
          area_limit: "",                //类型：String  必有字段  备注：区域限制1开启，0关闭
          integral_max_price:"",                //类型：String  必有字段  备注：订单金额大于多少可以使用积分
          integral_reduce_price:"",                //类型：String  必有字段  备注：积分最多抵扣多少元
          is_confirm_code:"",                //类型：String  必有字段  备注：是否启用收货码1开启，0关闭
          refund_promise_time:"",                //类型：String  必有字段  备注：保证金申请退款时间
          max_withdraw:"",                //最大提现金额，默认 /元（整数）
        },
        rules: {
          name: [
            {required: true, message: '请设置小程序名称', trigger: 'blur'},
          ],
          forward: [
            {required: true, message: '请设置转发图片', trigger: 'blur'},
          ],
          authorize: [
            {required: true, message: '请设置首页授权图片', trigger: 'blur'},
          ],
          poster: [
            {required: true, message: '请设置海报图片', trigger: 'blur'},
          ],
          integral: [
            {required: true, message: '请设置积分抵现', trigger: 'blur'},
          ],
          integral_rule: [
            {required: true, message: '请设置积分抵现声明', trigger: 'blur'},
          ],
          copyright: [
            {required: true, message: '请设置版权说明', trigger: 'blur'},
          ],
          copyright_rule: [
            {required: true, message: '请设置版权说明内容', trigger: 'blur'},
          ],
          secure_price: [
            {required: true, message: '请设置保单金额', trigger: 'blur'},
          ],
          phone: [
            {required: true, message: '请设置联系电话', trigger: 'blur'},
          ],
          extract: [
            {required: true, message: '请设置提成比例', trigger: 'blur'},
          ],
          user_integral: [
            {required: true, message: '请设置用户获得积分比例', trigger: 'blur'},
          ],
          vip_integral: [
            {required: true, message: '请设置会员获取积分比例', trigger: 'blur'},
          ],
          vip_price: [
            {required: true, message: '请设置会员价格', trigger: 'blur'},
          ],
          integral_max_price: [
            {required: true, message: '请设置订单金额大于多少可以使用积分', trigger: 'blur'},
          ],
          integral_reduce_price: [
            {required: true, message: '请设置积分最多抵扣多少元', trigger: 'blur'},
          ],
        },
        fileList: []
      };
    },
    methods: {
      fileUpload: function (fileInfo) {
        let file = fileInfo.file;
        let _this = this;
        this.BaseUtils.fileToBase64(file).then(function (value) {
          _this.api.uploadFileToBase64({
            file: value
          }, 'store').then(function (res) {
            if (res.code == 1) {
              eval('_this.ruleForm.' + fileInfo.filename + '="' + res.data + '"');
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              });
            } else {
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'warning'
              });
            }
          }).catch(function (error) {
            throw new Error(error);
          })
        }).catch(function (error) {
          throw new Error(error);
        })
      },
      handleAvatarSuccess(response, file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      submitForm(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.api.updateProcedureConfig(_this.ruleForm).then(function (res) {
              if (res.code == 1) {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'success'
                });
              } else {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'warning'
                });
              }
            }).catch(function (error) {
              throw new Error(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>

  .el-container {
    display: block;
  }

  /* 表单 */
  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  /* 图片上传 */
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 180px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
